<template>
  <div>

    <Row>
      <i-col span="24" :class-name="this.$yMobile()?'y_query_right':'y_query_left'" style="text-align: left;">
        <Cascader :data="categoryList" @on-change="classificationChange"  change-on-select class="y_condition"
                  placeholder="请选择产品分类" style="text-align: left; max-width: 200px;"></Cascader>
        <Input placeholder="产品编号" v-model="param.productCode" clearable class="y_condition"></Input>
        <Button type="primary" icon="md-search"  @click="webList" class="y_condition">
          查询
        </Button>
      </i-col>

    </Row>
    <Row>
      <div class="tip_div" v-show="productList.length === 0">
        <strong>操作提示 :  </strong>
        <br><br>
        <p>1. 查询哪些产品已经被下架</p>
      </div>
    </Row>


    <!--表格和分页-->
<!--    <Table stripe border class="base_table"
           :columns="tableTitles" :data="productList"
           no-data-text="暂无数据" @on-sort-change="productSortChanged"></Table>-->

    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
        <list-item class="list_item" v-for="(item,index) in productList">
          <div style="width:100%;padding: 0 0.5rem;"  >
            <Row type="flex" justify="space-between" align="middle">
              <i-col  :xs="7" :sm="2" style="text-align: left">
                <img :src="getProductZipImage(item)"
                     style="width:99%;max-width:100px;max-height:100px;"
                     @click="status.modalImage.url=item.productImg;status.modalImage.isShow = true;"/>
              </i-col>
              <i-col :xs="17" :sm="18" style="text-align: left;padding-left: 1rem;" >
                <KeyValueView>#{{index+1}}</KeyValueView>
                <KeyValueView title="SKU">
                  <a :href="$tiyProductUrl(item.code)" target="_blank">{{item.code}}</a>
                </KeyValueView>
                <div>
                  <KeyValueView title="价格">${{item.currentPrice}}</KeyValueView>
                  <KeyValueView title="销量">{{item.saleCount}}</KeyValueView>
                  <KeyValueView title="订单数">{{item.orderCount}}</KeyValueView>
                </div>

                <KeyValueView title="产品名">{{item.name}}</KeyValueView>
                <KeyValueView oneline title="删除时间" >{{ $tiyBJTime(item.lastmodify) }}</KeyValueView>


              </i-col>
              <i-col :xs="24" :sm="4" >
                <Button v-has=tRole.PRODUCT_7_201  ghost size="small" icon="md-return-left" type="primary" @click="findBackProduct(item.id,item.code)" >找回</Button>
<!--                <div style="margin-bottom: 0.5rem"></div>-->
<!--                <Button v-has=tRole.PRODUCT_7_202 ghost size="small" icon="md-trash" type="error"  @click="deleteProduct(item.id,item.code)" >删除</Button>-->
              </i-col>
            </Row>
          </div>
        </list-item>
    </List>

    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
            show-sizer show-elevator />
    </div>

    <Modal
      v-model="status.actionModal.isShow"
      :title="status.actionModal.title"
      :loading="status.actionModal.isLoading"
      @on-ok="status.actionModal.action">
      <br>
      <p>{{status.actionModal.content}}</p>
      <br>
    </Modal>

    <!--查看图片弹出框-->
    <Modal
      v-model="status.modalImage.isShow"
      title=""
      :styles="{align:'center'}">
      <!--:scrollable=true -->

      <div slot="footer"></div>
      <div align="center"><Img :src="status.modalImage.url" style="max-width: 300px"/></div>
    </Modal>
  </div>


</template>


<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/recycle/product_recycle_data";
  import {webList,init,actionBackProduct,realDelete} from "./js/recycle/product_recycle_fun";
  import {getProductCommonData, createCategoryList} from "../js/commonUtils";
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    data() {
      return {
        tRole:{
          PRODUCT_7_201:"PRODUCT-7-201",
          PRODUCT_7_202:"PRODUCT-7-202",
        },
        page: tiyData.tPage,
        productList: tiyData.tData.productList,
        status: tiyData.tStatus,
        tableTitles:tiyData.listTableTitles(this),
        param: tiyData.tParam,
        yunPath: this.$store.getters.imgPrefix,
        categoryList:tiyData.tData.categoryList,//分类控件所需要的数据
      }
    },
    computed : {

    },
    components: {
      KeyValueView
    },
    methods: {
      getProductZipImage(product){
        let imageUrl = product.productImg;
        let self=this;
        if(product.productShowImg!=null&&product.productShowImg.zipImgs!=null){
          let zipImg = product.productShowImg.zipImgs;
          zipImg.forEach(function (item){
            if(item.size=="200w"){
              imageUrl=self.yunPath+item.imagePath;
            }
          })
        }
        return !imageUrl ? '' : imageUrl;
      },
      webList(){
        // tiyData.tParam.selectedTabId='';
        tiyData.tPage.currentPage = 1;
        webList(this,tiyData)
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      classificationChange(value, selectedData){
        if ( 0 < selectedData.length) {
          tiyData.tParam.selectedClassification = selectedData[selectedData.length - 1].value;
          tiyData.tParam.classificationLevel = selectedData[selectedData.length - 1].level;
        } else {
          tiyData.tParam.selectedClassification = '';
        }

      },
      findBackProduct(productId, productCode){
        tiyData.tStatus.actionModal.title="找回产品";
        tiyData.tStatus.actionModal.isShow=true;
        tiyData.tStatus.actionModal.content="确定将产品状态改为下架?";
        tiyData.tStatus.actionModal.action=this.actionBackProduct;
        tiyData.tStatus.actionModal.productId=productId;
        tiyData.tStatus.actionModal.productCode=productCode;
      },
      actionBackProduct(){
        actionBackProduct(this,tiyData);
      },
     deleteProduct(productId, productCode){
      tiyData.tStatus.actionModal.title="删除产品";
      tiyData.tStatus.actionModal.isShow=true;
      tiyData.tStatus.actionModal.content="产品删除后不能找回，确定删除吗？";
      tiyData.tStatus.actionModal.action=this.actionDel;
      tiyData.tStatus.actionModal.productId=productId;
      tiyData.tStatus.actionModal.productCode=productCode;
     },
      actionDel(){
        realDelete(this,tiyData);
      },
      productSortChanged(column, key, order) {
          tiyData.tPage.total = 1;
          tiyData.tPage.startIndex = 0;
          tiyData.tPage.currentPage = 1;
          if ('normal' == column.order) {
              tiyData.tParam.orderBy = '';
          } else {
              tiyData.tParam.orderBy = column.key + ' ' + column.order;
          }
          webList(this, tiyData);
      },
    },
    mounted(){
      init(this,tiyData);
      // webList(this,tiyData);
      let types = [];
      types.push(3); //列表只查询分类
      getProductCommonData(this, tiyData.tData.categoryList, types, false, createCategoryList);
    }
  }
</script>

<!--css样式-->
<style lang="less" scoped>
@import  (once,optional) "../css/base";
  .operation_item {
    text-align: left;
    margin-right: 20px;
  }

  .y_query_left {
    text-align: left;
    display: flex;
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    justify-items: left;
    justify-content:flex-start;
  }

  .list_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .list_item:hover {
    background: @tiySectionColor;
  }
</style>
